<template>
  <h1>Pinia基本使用</h1>
  <button @click="edit">修改数据</button>
  <p>count: {{ app.count }}</p>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useMainStore } from '@/store';

// 普通写法，拿一个常量来接受
const app = useMainStore()

// 从store中解构出来想要的数据
// 这里 Pinia 其实是把 state 数据都做了 reactive 处理了
// const { count } = app  // 这样写就失去了响应时


// 把解构出来的数据做 ref 响应式代理
const { count } = storeToRefs(app)  // 响应式

function edit() {
  count.value++
  console.log(count.value)
}
</script>

<style lang="less" scoped>

</style>
